import React, { useState, useEffect, useRef, useMemo } from "react";
import * as echarts from "echarts";
export default () => {
  const ref = useRef();
  const [chart, setChart] = useState(null); //图表实例
  const [mapdata, setData] = useState(null); //数据
  const mapOption = useMemo(() => { //图表配置项
    if (!mapdata) return null;
    let option = {
      grid: {
        top: "3%",
        left: "3%",
        right: "20%",
        bottom: "0%",
        containLabel: true,
      },
      color: [{
        type: "linear",
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [{
          offset: 0, color: "rgba(101, 225, 255, 1)", // 0% 处的颜色
        }, {
          offset: 1, color: " rgba(34, 106, 245, 1)", // 100% 处的颜色
        }],
        global: false, // 缺省为 false
      }],
      xAxis: {
        max: "dataMax",
        show: false,
      },
      yAxis: {
        type: "category",
        data: ["上海市", "北京市", "广东省", "湖南省", "湖北省", "浙江省", "河南省", "安徽省",
          // "广西壮族自治区", "新疆维吾尔族自治区", "西藏自治区",
        ],
        inverse: true,
        animationDuration: 300,
        animationDurationUpdate: 300,
        // max: 7, //最多8个柱状图被展示

        axisLabel: {
          show: true,
          position: "right",
          fontSize: 14,
          color: "#22374D",
          fontFamily: "PingFangSC-Regular, PingFang SC",

        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },

      },
      series: [
        {
          // realtimeSort: true,
          name: "两岸三地热度排行",
          type: "bar",
          data: mapdata,
          stack: "chart",
          roundCap: true,

          showBackground: true,

          backgroundStyle: {
            color: "#ddd",
          },
          barWidth: "10px",
          labelLayout: { x: "82%", verticalAlign: "middle" },
          label: {
            show: true,
            position: "right",
            valueAnimation: true,
            color: "rgba(0, 105, 255, 1)",
            fontFamily: "PingFangSC-Regular, PingFang SC",
            formatter: (p) => {
              return `${p.data.label}热度`;
            },
          },
        },
      ],
      animationDuration: 1000,
      animationDurationUpdate: 1000,
      animationEasing: "linear",
      animationEasingUpdate: "linear",
    };
    return option;
  }, [mapdata]);

  /* ======= 在这里请求数据 ======== */
  const getData = () => {
    let data = [];
    for (let i = 0; i < 8; i++) {
      let v = Math.round(Math.random() * 20000000);
      let f = (v / 10000).toFixed(2);
      let temp = { name: f, value: v, label: `${f}万` };
      data.push(temp);
    }
    setData(data);
  };

  /*========= 定时修改数据 ========= */
  useEffect(() => {
    getData();
    let timer = setInterval(() => {
      getData();
    },
    5000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  /* ======== 生成图表实例 =========*/
  useEffect(() => {
    ref.current && setChart(echarts.init(ref.current));
  }, []);

  /* ======== 渲染图表 ======== */
  useEffect(() => {
    chart && mapOption && chart.setOption(mapOption);
  }, [chart, mapOption]);

  return (
    <div style={{ width: "100%", height: "100%" }} ref={ref}>
    </div>
  );
};
